import * as echarts from 'echarts'
let data = [42,32,8,8,6];
let option = {
    tooltip: {
      showContent: true,
      trigger: 'axis',
      backgroundColor: 'rgba(8,36,68,.7)',
      color: '#fff',
      textStyle: {
        color: '#fff',
      },
    },
    legend: {
      top: '0%',
      right: '10',
      icon: 'rect',
      itemWidth: 13,
      itemHeight: 13,
      textStyle: {
        color: 'rgba(250,250,250,0.6)',
        fontSize: 16,
      },
    },
    grid: {
      left: '20%',
      right: '6%',
      top: '5%',
      bottom: '5%',
      // width: 250,
    },
    xAxis: [
      {
        splitLine: {
          show: false,
        },
        type: 'value',
        show: false,
      },
    ],
    yAxis: [
      {
        splitLine: {
          show: false,
        },
        axisLine: {
          //y轴
          show: false,
        },
        type: 'category',
        axisTick: {
          show: false,
        },
        inverse: true,
        data: [
          '华语流行',
          '民谣',
          '原声带',
          '嘻哈说唱',
          '摇滚'],
        axisLabel: {
          color: '#A7D6F4',
          fontSize: 14,
          margin: 20,
          formatter: function (value) {
            if (value.length > 5) {
              return value.substring(0, 5) + '...';
            } else {
              return value;
            }
          },
        },
      },
      {
        type: 'category',
        inverse: true,
        axisTick: 'none',
        axisLine: 'none',
        show: true,
        axisLabel: {
          textStyle: {
            color: '#A7D6F4',
            fontSize: '14',
          },
        },
        // data: value,
        data:data
      },
    ],
    series: [
      {
        type: 'bar',
        barWidth: 8, // 柱子宽度
        showBackground: true,
        MaxSize: 0,
        backgroundStyle: {
          color: '#0c3151',
        },
        label: {
          show: false,
          // color: '#A7D6F4',
          // fontSize: 14,
          // distance: 20, // 距离
          // formatter: '{c} ', // 这里是数据展示的时候显示的数据
          // align: "center",
          // position: [290, 0]
        }, // 柱子上方的数值
        itemStyle: {
          barBorderRadius: [0, 4, 4, 0], // 圆角（左上、右上、右下、左下）
          color: new echarts.graphic.LinearGradient(
            1,
            0,
            0,
            0,
            [
              {
                offset: 0,
                color: '#159dd2',
              },
              {
                offset: 0.5,
                color: '#2db6ce',
              },
              {
                offset: 1,
                color: '#48d0ca',
              },
            ],
            false
          ), // 渐变
        },
        data: data,
      },
    ],
  };
export {option}
